<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <script src='./js/pinyin_dict_notone.js'></script>
  <script src="./js/pinyinUtil.js"></script>
  <script src="./js/scroll.js"></script>
  <style>
    @font-face {
      font-family: "fzzg";
      src: url(./font/FZZJ-ZGXTJW.TTF);
    }

    @font-face {
      font-family: FZFWQingYinTiJWM;
      src: url(./font/FZFWQingYinTiJWM.TTF);
    }

    * {
      padding: 0;
      margin: 0;
    }

    html,
    body {
      width: 100%;
      height: 100%;
    }

    html {
      /* overflow-y: scroll; */
      overflow: hidden;
    }

    #box {
      margin: 0 auto;
      width: 100%;
      /* height: 100px; */
      height: 100%;
      background: #c0c4c3;
      /* max-width: 1260px; */
      /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04); */
      transition: 1.5s;

    }


    #latiao {
      position: relative;
      /* clear: both; */
      width: 100%;
      height: 32px;
      background: #1a94bc;
      text-align: center;
      transition: 1.5s;
      border: 2px dotted black;
      box-sizing: border-box;
      border-top-right-radius:10px;
      border-top-left-radius:10px

    }

    #latiao svg {
      /* display: block;
      margin: 0 auto; */
      position: absolute;
    }

    #rightslide {
      float: right;
      /* min-width: 25%; */
      width: 25%;
      height: 100%;
      background: #1a94bc;
      border-top-left-radius: 10px;
      border-bottom-left-radius: 10px;
      transition: 1.5s;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
      /* border-left: 10px solid rgba(0, 0, 0, 0.04); */

      overflow-y: auto;
    }

    #content {
      float: left;
      width: 74.5%;
      height: 100%;
      background: rgba(172, 77, 77, 0.671);
      border-top-right-radius: 10px;
      border-bottom-right-radius: 10px;
      /* border-right: 20px solid rgba(0, 0, 0, 0); */
      transition: 1.4s;
    }

    #rightslide svg {
      position: sticky;
      width: 32px;
      height: 30px;
      margin-left: -9px;
      top: 50%;

    }

    #rightslide ul {
      position: relative;
      list-style: none;
      width: 80%;
      left: 10%;


    }


    #rightslide ul li {
      width: 100%;
      height: 40px;
      line-height: 40px;
      list-style: none;
      text-align: center;
      margin-bottom: 10px;
      border: 1px solid blueviolet;
      border-radius: 10px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
      cursor: pointer;
    }

    #poem {

      position: relative;
      /* width: 100%; */
      height: 100%;
      background: rgb(27, 117, 139);
      overflow: hidden;

    }

    #poem-info {
      position: absolute;
      min-width: 90%;
      height: 80%;
      border-radius: 10px;
      box-shadow: -5px 10px 10px 10px rgba(126, 49, 49, 0.2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0,
          0, .12);
      right: 5%;
      left: 5%;
      margin-top: 1.5%;
      text-align: center;
      top: 1%;
      overflow-y: auto;
    }



    #poem-info h3 {
      font-family: FZFWQingYinTiJWM;
      font-size: 25px;
    }

    #poem-info h3+p {
      font-size: 20px;
    }

    #poem-pro {
      position: relative;
    }

    #poem-pro p {
      font-family: FZFWQingYinTiJWM;
      font-size: 30px;
    }

    #page {
      position: absolute;
      width: 100%;
      height: 48px;
      bottom: 50px;
      /* left: 50%; */
      text-align: center;
      line-height: 32px;
      overflow: hidden;

    }

    #page div span {
      display: inline-block;
      margin-top: 32px;
      font-size: 25px;
      width: 32px;
      /* height: 40px; */
      margin-top: 10px;
      border-radius: 50%;
      border: 1px solid black;
      /* margin-left: 5%; */
      cursor: pointer;
    }

    #page svg {}

    #page div {
      /* position: absolute; */
      margin: 0 auto;
      overflow: hidden;
      width: 70%;
      height: 60px;
      white-space: nowrap;
      /* overflow: hidden; */
      overflow-x: auto;
      /* left: 10%;
      right: 10%; */
      /* margin-left: 12%; */
    }

    #page svg:first-of-type {
      position: absolute;
      left: 6%;
    }

    #page svg:last-of-type {
      position: absolute;
      transform: rotateY(180deg);
      right: 6%;
    }
  </style>
</head>

<body>
  <div id="box">
    
    <div id="content">
        <div id="latiao">
      <svg t="1594370489529" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
        p-id="2489" width="32" height="32">
        <path
          d="M934.4 489.6L707.2 262.4c-12.8-12.8-32-12.8-44.8 0-12.8 12.8-12.8 32 0 44.8L867.2 512 662.4 716.8c-12.8 12.8-12.8 32 0 44.8 12.8 12.8 32 12.8 44.8 0l227.2-227.2c6.4-6.4 9.6-16 9.6-22.4 0-9.6-3.2-16-9.6-22.4z"
          fill="#333333" p-id="2490"></path>
        <path
          d="M646.4 489.6L419.2 262.4c-12.8-12.8-32-12.8-44.8 0-12.8 12.8-12.8 32 0 44.8L579.2 512 374.4 716.8c-12.8 12.8-12.8 32 0 44.8 12.8 12.8 32 12.8 44.8 0l227.2-227.2c6.4-6.4 9.6-16 9.6-22.4 0-9.6-3.2-16-9.6-22.4z"
          fill="#333333" p-id="2491"></path>
        <path
          d="M358.4 489.6l-224-227.2c-12.8-12.8-32-12.8-44.8 0-12.8 12.8-12.8 32 0 44.8L291.2 512 86.4 716.8c-12.8 12.8-12.8 32 0 44.8 12.8 12.8 32 12.8 44.8 0l227.2-227.2c6.4-6.4 9.6-16 9.6-22.4 0-9.6-3.2-16-9.6-22.4z"
          fill="#333333" p-id="2492"></path>
      </svg>
    </div>
      <div id="poem">
        <div id='poem-info'>
          <h3></h3>
          <p></p>
          <div id="poem-pro">
            <p></p>
          </div>
        </div>
        <div id="page">
          <svg t="1594374486313" class="icon" viewBox="0 0 2147 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="21370" width="48" height="48">
            <path
              d="M1915.437595 937.063848S529.614082 1122.428777 441.345068 619.295399C414.864364 345.661457 485.479575 133.815825 706.152109 222.084838 935.651544 310.353852 794.421122 380.969063 706.152109 354.488359 662.017602 345.661457 609.056194 389.795964 617.883095 442.757372s88.269014 264.807041 326.595351 176.538027c229.499435-88.269014 141.230422-406.037463 0-494.306476C812.074925 36.71991 556.094786-86.856709 397.210561 89.681318c0 0-485.479575-132.40352-308.941547 361.902956 0 0-264.807041 335.422252 132.40352 467.825772 406.037463 141.230422 1235.766191 105.922816 1694.765061 8.826901z"
              fill="#1296db" p-id="21371"></path>
            <path
              d="M2144.937031 892.929342S1324.035204 998.852158 1271.073796 707.564413C1253.419993 548.680189 1297.5545 416.276668 1429.95802 469.238076c132.40352 52.961408 52.961408 88.269014 0 88.269014C1403.477316 531.026386 1376.996612 557.50709 1385.823514 592.814695c0 44.134507 52.961408 158.884224 194.19183 105.922817 132.40352-44.134507 79.442112-238.326337 0-291.287745C1482.919429 354.488359 1341.689007 283.873148 1244.593092 398.622865c0 0-282.460844-88.269014-185.364929 211.845633 0 0-158.884224 194.19183 88.269014 282.460844 238.326337 79.442112 723.805912 61.78831 997.439854 0z"
              fill="#1296db" p-id="21372"></path>
          </svg>

          <svg t="1594374486313" class="icon" viewBox="0 0 2147 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="21370" width="48" height="48">
            <path
              d="M1915.437595 937.063848S529.614082 1122.428777 441.345068 619.295399C414.864364 345.661457 485.479575 133.815825 706.152109 222.084838 935.651544 310.353852 794.421122 380.969063 706.152109 354.488359 662.017602 345.661457 609.056194 389.795964 617.883095 442.757372s88.269014 264.807041 326.595351 176.538027c229.499435-88.269014 141.230422-406.037463 0-494.306476C812.074925 36.71991 556.094786-86.856709 397.210561 89.681318c0 0-485.479575-132.40352-308.941547 361.902956 0 0-264.807041 335.422252 132.40352 467.825772 406.037463 141.230422 1235.766191 105.922816 1694.765061 8.826901z"
              fill="#1296db" p-id="21371"></path>
            <path
              d="M2144.937031 892.929342S1324.035204 998.852158 1271.073796 707.564413C1253.419993 548.680189 1297.5545 416.276668 1429.95802 469.238076c132.40352 52.961408 52.961408 88.269014 0 88.269014C1403.477316 531.026386 1376.996612 557.50709 1385.823514 592.814695c0 44.134507 52.961408 158.884224 194.19183 105.922817 132.40352-44.134507 79.442112-238.326337 0-291.287745C1482.919429 354.488359 1341.689007 283.873148 1244.593092 398.622865c0 0-282.460844-88.269014-185.364929 211.845633 0 0-158.884224 194.19183 88.269014 282.460844 238.326337 79.442112 723.805912 61.78831 997.439854 0z"
              fill="#1296db" p-id="21372"></path>
          </svg>
          <div>

          </div>
        </div>
      </div>

      <ul>

      </ul>
    </div>
    <div id="rightslide">
      <ul class="shadow">
        <!-- <li>
            <input type="text" />
          </li> -->
      </ul>
    </div>

  </div>
</body>
<script>
  var height = document.documentElement.clientHeight
  var rightslide = document.querySelector("#rightslide")
  // var svg = document.querySelector("#rightslide >svg")
  var ul = document.querySelector("#rightslide>ul")
  var content = document.querySelector('#content')
  var contentUl = document.querySelector('#content>ul')
  var poemtitle = document.querySelector('#poem-info > h3')
  var poemauthor = document.querySelector('#poem-info > p')
  var poempro = document.querySelector('#poem-pro')
  var svg = document.querySelector("#rightslide>svg")
  var latiao = document.querySelector(' #latiao')
  var latiaoSvg = document.querySelector("#latiao >svg")
  var pageD = document.querySelector('#page >div')
  var tr = false
  latiao.onclick = function () {
    console.log(latiao.style.transform)

    content.style.width = !tr ? content.style.width = '100%' : content.style.width = '74.5%'
    rightslide.style.width = !tr ? rightslide.style.width = '0' : rightslide.style.width = '25%'
    latiao.style.transform = !tr ? latiao.style.transform = 'rotateY(180deg)' : latiao.style.transform =
      'rotateY(0)'
    //latiao.style.transform = 'rotateZ(180deg)'

    tr = !tr

  }

  var startAut = 0;
  var endAut = 30;
  var xhr = new XMLHttpRequest()

  xhr.open("get", "./json/author.json", true)
  xhr.send()
  var author = null
  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
      authors = JSON.parse(xhr.responseText).slice(startAut, endAut)
      //console.log(authors)
      sessionStorage.setItem('authors', xhr.responseText)
      for (var i = 0; i < authors.length; i++) {
        li = document.createElement("li")
        li.setAttribute('author_py', authors[i].filename)
        li.innerText = authors[i].author
        ul.appendChild(li)
      }
    }
  }
  /*
      监听诗人列表scroll触底
  */
  listenScrollToBottom(rightslide, ev => {
    startAut = endAut;
    endAut += 30
    newAuthor = JSON.parse(sessionStorage.getItem('authors')).slice(startAut, endAut);
    for (var i = 0; i < newAuthor.length; i++) {
      li = document.createElement("li");
      li.setAttribute('author_py', newAuthor[i].filename);
      li.innerText = newAuthor[i].author;
      ul.appendChild(li)
    }
  })

  /*
  
  */
  ul.addEventListener('click', ev => {
    //contentUl.removeChild('li');

    ev = ev || event;
    var target = ev.target || ev.srcElement;
    //name = target;
    var name = target.getAttribute('author_py')
    xhr.open("get", "./json/feilei_jianti/" + name, true)
    xhr.send();
    poempro.innerHTML = null
    if (document.querySelectorAll('#page div>span')) {
      var span = document.querySelectorAll('#page>div>span');
      for (var i = 0; i < span.length; i++) {
        span[i].remove();
      }
    }
    xhr.onreadystatechange = function (res) {
      if (xhr.readyState == 4) {
        poems = JSON.parse(xhr.responseText)
        console.log(JSON.parse(xhr.responseText))
        // (var p = 0; i < poems.length; i++) {

        sessionStorage.setItem('poems', JSON.stringify(poems))
        // }
        poemtitle.innerText = poems[0].title;
        poemauthor.innerText = poems[0].author;
        var poemps = poems[0].content
        console.log(poemps)
        for (var i = 0; i < poemps.length; i++) {

          let pPro = document.createElement('p');

          pPro.innerText = poemps[i]
          poempro.appendChild(pPro)
        }
        for (var i = 0; i < poems.length; i++) {
          let Npage = document.createElement('span')
          Npage.setAttribute('num', i)
          Npage.innerText = i + 1;
          pageD.appendChild(Npage)
        }
        //console.log(poemtitle)
      }
    }
  })

  pageD.addEventListener('click', ev => {
    ev = ev || window.event
    var target = ev.target || ev.srcElement
    var num = parseInt(target.getAttribute('num'));
    //console.log(target)
    var poemObj = JSON.parse(sessionStorage.getItem('poems'))[num];
    //console.log("session", poemObj.title)
    poempro.innerHTML = null;
    poemtitle.innerText = null;
    poemauthor.innerText = null
    poemtitle.innerText = poemObj.title;
    poemauthor.innerText = poemObj.author;
    for (var i = 0; i < poemObj.content.length; i++) {
      pPro = document.createElement('p');
      pPro.innerText = poemObj.content[i];
      poempro.appendChild(pPro);
    }
  })
</script>

</html>